<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="js/rem.js"></script>
		<link rel="stylesheet" href="css/swiper.min.css">
		<link href="css/iconfont.css" rel="stylesheet" />
		<link href="css/animate.min.css" rel="stylesheet" />
		<link href="css/css.css" rel="stylesheet" />
		<style>
			.swiper-container {
				width: 100%;
				height: 100%;
			}
			
			.swiper-container .swiper-pagination-bullet {
				background: #fff;
			}
			
			.swiper-container .swiper-pagination-bullet-active {
				background: #d1a185;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div>
				<header>
					<div>LARGO BAR（内厅-卡1）</div>
					<a class="rs-pull-right">重选</a>
				</header>
				<div class="rs-alert rs-choose">
					<div class="rs-choose-logo rs-border-dashed"><img src="img/logo.png" /></div>
					<div class="rs-choose-zs f16">
						<div class="rs-border-dashed">
							<div class="rs-choose-title">内厅</div>
							<ul>
								<li class="rs-active">V1</li>
								<li>V2</li>
								<li>V3</li>
								<li>卡1</li>
								<li>卡2</li>
								<li>吧1</li>
								<li>吧2</li>
								<li>吧3</li>
								<li>吧4</li>
								<li>吧5</li>
								<li>吧6</li>
								<li>吧7</li>
								<li>吧8</li>
								<li>吧9</li>
							</ul>
						</div>
						<div class="rs-border-dashed">
							<div class="rs-choose-title">外厅</div>
							<ul>
								<li>V1</li>
								<li>V2</li>
								<li>V3</li>
								<li>卡1</li>
								<li>卡2</li>
								<li>吧1</li>
								<li>吧2</li>
								<li>吧3</li>
								<li>吧4</li>
								<li>吧5</li>
								<li>吧6</li>
								<li>吧7</li>
								<li>吧8</li>
								<li>吧9</li>
							</ul>
						</div>

					</div>
					<img src="img/img-4.png" class="rs-choose-bottom" />
				</div>

				<div class="rs-content">
					<div class="rs-bk-img">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide"><img src="img/banner-1.jpg" /></div>
								<div class="swiper-slide"><img src="img/banner-1.jpg" /></div>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-pagination"></div>
						</div>
					</div>
					<div class="rs-nav">
						<div class="rs-nav-left">
							<ul>
								<li class="rs-active">
									<a href="#nav1">
										<img src="img/menu_wsj.png" class="rs-nav-img">
										<div class="rs-nav-title-ch f22">威士忌</div>
									</a>
								</li>
								<li>
									<a href="#nav2">
										<img src="img/menu_jwj.png" class="rs-nav-img">
										<div class="rs-nav-title-ch f22">鸡尾酒</div>
									</a>
								</li>
								<li>
									<a href="#nav3">
										<img src="img/menu_hj.png" class="rs-nav-img">
										<div class="rs-nav-title-ch f22">红酒</div>
									</a>
								</li>
								<li>
									<a href="#nav4">
										<img src="img/menu_jj.png" class="rs-nav-img">
										<div class="rs-nav-title-ch f22">金酒</div>
									</a>
								</li>
							</ul>
						</div>
						<div class="rs-nav-right">
							<h3 class="f14" id="nav1">掌柜特推</h3>
							<ul class="rs-clearfix">
								<li>
									<a href="#">
										<img src="img/img-2.png">
										<div class="rs-nav-title">
											<img class="rs-jia" src="img/tu_jia.png">
											<div class="rs-nav-title-r">户河内威士忌</div>
											¥2980
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/img-2.png">
										<div class="rs-nav-title">
											<img class="rs-jia" src="img/tu_jia.png">
											<div class="rs-nav-title-r">户河内威士忌</div>
											¥2980
										</div>
									</a>
								</li>
							</ul>
							<h3 class="f14" id="nav2">白兰地</h3>
							<ul class="rs-clearfix">
								<li>
									<a href="#">
										<img src="img/img-2.png">
										<div class="rs-nav-title">
											<img class="rs-jia" src="img/tu_jia.png">
											<div class="rs-nav-title-r">户河内威士忌</div>
											¥2980
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/img-2.png">
										<div class="rs-nav-title">
											<img class="rs-jia" src="img/tu_jia.png">
											<div class="rs-nav-title-r">户河内威士忌</div>
											¥2980
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/img-2.png">
										<div class="rs-nav-title">
											<img class="rs-jia" src="img/tu_jia.png">
											<div class="rs-nav-title-r">户河内威士忌</div>
											¥2980
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/img-2.png">
										<div class="rs-nav-title">
											<img class="rs-jia" src="img/tu_jia.png">
											<div class="rs-nav-title-r">户河内威士忌</div>
											¥2980
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/img-2.png">
										<div class="rs-nav-title">
											<img class="rs-jia" src="img/tu_jia.png">
											<div class="rs-nav-title-r">户河内威士忌</div>
											¥2980
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="img/img-2.png">
										<div class="rs-nav-title">
											<img class="rs-jia" src="img/tu_jia.png">
											<div class="rs-nav-title-r">户河内威士忌</div>
											¥2980
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<div class="rs-fixed-order rs-hide">
					<ul>
						<li>
							<div class="f14">蜜桃伯爵</div>
							<div class="f16">￥76</div>
							<div class="rs-order-jiaj">
								<span class="minus"></span>
								<input type="text" class="result" value="4">
								<span class="add"></span>
							</div>
						</li>
						<li>
							<div class="f14">蜜桃伯爵</div>
							<div class="f16">￥76</div>
							<div class="rs-order-jiaj">
								<span class="minus"></span>
								<input type="text" class="result" value="4">
								<span class="add"></span>
							</div>
						</li>
						<li>
							<div class="f14">蜜桃伯爵</div>
							<div class="f16">￥76</div>
							<div class="rs-order-jiaj">
								<span class="minus"></span>
								<input type="text" class="result" value="4">
								<span class="add"></span>
							</div>
						</li>
						<li>
							<div class="f14">蜜桃伯爵</div>
							<div class="f16">￥76</div>
							<div class="rs-order-jiaj">
								<span class="minus"></span>
								<input type="text" class="result" value="4">
								<span class="add"></span>
							</div>
						</li>
					</ul>
				</div>
				<footer class="rs-order-none">
					<a href="#" class="gouwuche">
						<span class="rs-gouwuche f24"></span>
						<span class="rs-gouwuche-num">9</span>
					</a>
					<a href="#" class="rs-success rs-btn rs-btn-success rs-btn-wc"></a>
				</footer>
				<div class="rs-bk-shadow rs-hide"></div>
				<div class="rs-alert rs-detail rs-hide">
					<span class="rs-clear rs-icon rs-icon-clear"></span>
					<div class="rs-detail-img">
						<img src="img/img-2.png">

					</div>
					<div class="rs-detail-text f13">
						<div class="f22" style="margin-bottom: 0.1rem;">户河内威士忌</div>
						<p>原生态蜜桃，掌柜特推蜜桃伯爵原生态蜜桃，掌柜特推蜜桃伯爵原生态蜜桃，掌柜特推蜜桃伯爵原生态蜜桃，掌柜特推蜜桃伯爵原生态蜜桃，掌柜特推蜜桃伯爵原生态蜜桃，掌柜特推蜜桃伯爵原生态蜜桃，掌柜特推蜜桃伯爵</p>
						<div class="rs-add">
							<div class="rs-detail-nav">
								<span class="ml5 f22">￥38</span>
							</div>
							<span class="rs-icon rs-icon-add"></span>
						</div>
					</div>
				</div>
				<div class="rs-alert rs-zhifu rs-hide">
					<span class="rs-clear rs-icon rs-icon-clear"></span>
					<div class="rs-detail-zhifu">
						<h5 class="f12">订单号：201601083018792</h5>
						<ul class="rs-order-list">
							<li>
								<img src="img/img-2.png" class="rs-order-img" />
								<div class="rs-order-del">
									删除
								</div>
								<div class="rs-order-body">
									<div class="f16">蜜桃伯爵</div>
									<div class="f18">￥76</div>
									<div class="rs-order-jiaj">
										<span class="minus"></span>
										<input type="text" class="result" value="4">
										<span class="add"></span>
									</div>
								</div>
							</li>
							<li>
								<img src="img/img-2.png" class="rs-order-img" />
								<div class="rs-order-del">
									删除
								</div>
								<div class="rs-order-body">
									<div class="f16">蜜桃伯爵</div>
									<div class="f18">￥76</div>
									<div class="rs-order-jiaj">
										<span class="minus"></span>
										<input type="text" class="result" value="4">
										<span class="add"></span>
									</div>
								</div>
							</li>
							<li>
								<img src="img/img-2.png" class="rs-order-img" />
								<div class="rs-order-del">
									删除
								</div>
								<div class="rs-order-body">
									<div class="f16">蜜桃伯爵</div>
									<div class="f18">￥76</div>
									<div class="rs-order-jiaj">
										<span class="minus"></span>
										<input type="text" class="result" value="4">
										<span class="add"></span>
									</div>
								</div>
							</li>
							<li>
								<img src="img/img-2.png" class="rs-order-img" />
								<div class="rs-order-del">
									删除
								</div>
								<div class="rs-order-body">
									<div class="f16">蜜桃伯爵</div>
									<div class="f18">￥76</div>
									<div class="rs-order-jiaj">
										<span class="minus"></span>
										<input type="text" class="result" value="4">
										<span class="add"></span>
									</div>
								</div>
							</li>
							<li>
								<img src="img/img-2.png" class="rs-order-img" />
								<div class="rs-order-del">
									删除
								</div>
								<div class="rs-order-body">
									<div class="f16">蜜桃伯爵</div>
									<div class="f18">￥76</div>
									<div class="rs-order-jiaj">
										<span class="minus"></span>
										<input type="text" class="result" value="4">
										<span class="add"></span>
									</div>
								</div>
							</li>
						</ul>
						<div class="rs-zhuos f16">
							<input type="text" class="f16" placeholder="--请输入您的桌数--" />
						</div>
					</div>
					<div class="rs-order-footer f16">
						合计:<span class="f24">￥240</span>
						<a href="#" class="rs-success rs-btn rs-btn-success"></a>
					</div>
				</div>
				<div class="rs-alert rs-change-order rs-hide">
					<div class="rs-choose-logo rs-border-dashed"><img src="img/logo.png" /></div>
					<ul class="f16">
						<li>修改订单</li>
						<li>清台</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="js/swiper.min.js"></script>
		<script>
			var swiper = new Swiper('.swiper-container', {
				pagination: {
					el: '.swiper-pagination',
					dynamicBullets: true,
				},
				loop: true,
				autoplay: true
			});
		</script>
		<script>
			$(".rs-nav-left li").click(function() {
				$(".rs-nav-left li").removeClass("rs-active")
				$(this).addClass("rs-active")
			})
			$(".rs-nav-right li").click(function() {
				$("footer").addClass("rs-shadow")
				$(".rs-content").addClass("rs-shadow")
				$(".rs-bk-shadow").removeClass("fadeOut rs-hide").addClass("animated fadeIn")
				$(".rs-detail").removeClass("fadeOut rs-hide").addClass("animated fadeIn")
				$(".rs-fixed-order").removeClass("fadeInUp").addClass("animated fadeOutDown rs-hide")
			})
			$(".rs-clear").click(function() {
				$("footer").removeClass("rs-shadow")
				$(".rs-content").removeClass("rs-shadow")
				$(".rs-bk-shadow").removeClass("fadeIn").addClass("animated fadeOut rs-hide")
				$(this).parents(".rs-alert").removeClass("fadeIn").addClass("animated fadeOut rs-hide")
				$(".rs-fixed-order").removeClass("fadeInUp").addClass("animated fadeOutDown rs-hide")
			})
			//点击完成显示支付
			$("footer .rs-success").click(function() {
				$("footer").addClass("rs-shadow")
				$(".rs-content").addClass("rs-shadow")
				$(".rs-bk-shadow").removeClass("fadeOut rs-hide").addClass("animated fadeIn")
				$(".rs-zhifu").removeClass("fadeOut rs-hide").addClass("animated fadeIn")
				$(".rs-fixed-order").removeClass("fadeInUp").addClass("animated fadeOutDown rs-hide")
			})
			$(".add").click(function() {
				if($(this).hasClass("add1")) {
					$(this).removeClass("add1")
					var result = parseInt($(this).parents(".rs-order-jiaj").find(".result").val()) + 1
					$(this).parents(".rs-order-jiaj").find(".result").val(result)
				} else {
					$(this).addClass("add1")
					$(this).parents(".rs-order-jiaj").addClass("bk-success")
					$(this).parents(".rs-order-jiaj").find(".result").removeClass("fadeOutRight").addClass("animated fadeInRight")
					$(this).parents(".rs-order-jiaj").find(".minus").removeClass("fadeOutRight").addClass("animated fadeInRight")
				}
			})
			$(".minus").click(function() {
				var result = $(this).parents(".rs-order-jiaj").find(".result").val()
				result = result - 1
				$(this).parents(".rs-order-jiaj").find(".result").val(result)
				if(result < 1) {
					$(this).parents(".rs-order-jiaj").removeClass("bk-success")
					$(this).parents(".rs-order-jiaj").find(".result").removeClass("fadeInRight").addClass("animated fadeOutRight")
					$(this).removeClass("fadeInRight").addClass("animated fadeOutRight")
					$(this).parents(".rs-order-jiaj").find(".add").removeClass("add1")
				}
			})
			//点击购物车
			$(".gouwuche").click(function() {
				if($(".rs-fixed-order").hasClass("fadeInUp")) {
					$(".rs-content").removeClass("rs-shadow")
					$(".rs-bk-shadow").removeClass("fadeIn").addClass("animated fadeOut rs-hide")
					$(".rs-fixed-order").removeClass("fadeInUp").addClass("animated fadeOutDown rs-hide")
				} else {
					$(".rs-content").addClass("rs-shadow")
					$(".rs-bk-shadow").removeClass("fadeOut rs-hide").addClass("animated fadeIn")
					$(".rs-fixed-order").removeClass("fadeOutDown rs-hide").addClass("animated fadeInUp")
				}
			})
			//清空购物车
			$(".rs-order-clear").click(function() {
				$(".rs-content").removeClass("rs-shadow")
				$(".rs-bk-shadow").removeClass("fadeIn").addClass("animated fadeOut rs-hide")
				$(".rs-fixed-order").removeClass("fadeInUp").addClass("animated fadeOutDown")
				$(".rs-fixed-order ul").remove();
				$(".rs-gouwuche-num").html(0)
			})
			//卡座选完之后提示修改订单和清台
			$(".rs-choose-zs li.rs-active").click(function() {
				$("footer").addClass("rs-shadow")
				$(".rs-content").addClass("rs-shadow")
				$(".rs-bk-shadow").removeClass("fadeOut rs-hide").addClass("animated fadeIn")
				$(".rs-change-order").removeClass("fadeOut rs-hide").addClass("animated fadeIn")
				$(".rs-fixed-order").removeClass("fadeInUp").addClass("animated fadeOutDown rs-hide")
				$(".rs-choose").removeClass("fadeInUp").addClass("animated fadeOutDown rs-hide")
			})
			//订单左滑删除
			var container = document.querySelectorAll('.rs-order-list li');
			for(var i = 0; i < container.length; i++) {
				var x, y, X, Y, swipeX, swipeY;
				container[i].addEventListener('touchstart', function(event) {
					x = event.changedTouches[0].pageX;
					y = event.changedTouches[0].pageY;
					swipeX = true;
					swipeY = true;
				});
				container[i].addEventListener('touchmove', function(event) {
					X = event.changedTouches[0].pageX;
					Y = event.changedTouches[0].pageY;
					// 左右滑动
					if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
						// 阻止事件冒泡
						event.stopPropagation();

						if(X - x > 10) { //右滑
							event.preventDefault();
							this.className = ""; //右滑收起
						}
						if(x - X > 10) { //左滑
							event.preventDefault();
							var swipeLeft = document.getElementsByClassName("swipeleft");
							for(var j = 0; j < swipeLeft.length; j++) {
								swipeLeft[j].className = "";
							}
							this.className = "swipeleft"; //左滑展开
						}
						swipeY = false;
					}
					// 上下滑动
					if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
						swipeX = false;
					}
				});
			}

			var i = document.querySelectorAll('.rs-order-list .rs-order-del ');
			i.forEach(function(item, index) {
				i[index].onclick = function() {
					this.parentNode.remove();
				};
			});
		</script>
	</body>

</html>